import React, { Component, useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Table,
  Button,
  Select,
  Tag,
  Modal,
  Radio,
  Row,
  Divider,
  Col,
  Alert,
  DatePicker,
  Popconfirm,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
const { Option } = Select;

const Index = ({
  dispatch,
  datasource,
  total,
  commodityData,
  hourseData,
  isRefresh,
}: {
  dispatch: (type: any) => void;
  datasource: Array<any>;
  total: number;
  isRefresh: boolean;
  commodityData: any;
  hourseData: any;
}) => {
  const [wineId, setwineId] = useState('');
  const [warehouseId, setwarehouseId] = useState('');
  const [size, setSize] = useState(10);
  const [currentPage, setcurrentPage] = useState(1);

  useEffect(() => {
    // handleSearch();
    dispatch({
      type: 'instock/reFresh',
      payload: true,
    });
  }, []); //size, currentPage, wineId, warehouseId

  useEffect(() => {
    if (isRefresh) {
      handleSearch();
    }
  }, [isRefresh]); //size, currentPage, wineId, warehouseId

  const handleSearch = () => {
    dispatch({
      type: 'instock/list',
      payload: {
        size: size,
        page: currentPage,
        wineId: wineId,
        warehouseId: warehouseId,
      },
    });
  };
  const handleDown = () => {
    dispatch({
      type: 'instock/down',
      payload: {
        size: size,
        page: currentPage,
        wineId: wineId,
        warehouseId: warehouseId,
      },
    });
  };
  const columns = [
    {
      title: '序号',
      align: 'center',
      render: (text: any, record: any, index: any) => `${index + 1}`,
    },
    {
      title: '酒类',
      dataIndex: 'wineName',
      align: 'center',
    },
    {
      title: '仓库',
      dataIndex: 'warehouseName',
      align: 'center',
    },
    {
      title: '买入(件)',
      dataIndex: 'purDozenQty',
      align: 'center',
    },
    {
      title: '买入(瓶)',
      dataIndex: 'purBottleQty',
      align: 'center',
    },
    {
      title: '售出(件)',
      dataIndex: 'soldDozenQty',
      align: 'center',
    },
    {
      title: '售出(瓶)',
      dataIndex: 'soldBottleQty',
      align: 'center',
    },
    {
      title: '库存(件)',
      dataIndex: 'invDozenQty',
      align: 'center',
    },
    {
      title: '库存(瓶)',
      dataIndex: 'invBottleQty',
      align: 'center',
    },
  ];
  return (
    <PageHeaderWrapper>
      <div style={{ paddingLeft: '22px', marginBottom: '6px' }}>
        <Form layout="inline">
          <Form.Item label="酒类">
            <Select
              showSearch
              allowClear
              placeholder="请输入商品"
              filterOption={false}
              onChange={(val: any) => {
                setwineId(val);
              }}
              style={{ width: '180px' }}
            >
              {commodityData.length > 0
                ? commodityData.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}（{item.comments}）
                    </Option>
                  ))
                : null}
            </Select>
          </Form.Item>
          <Form.Item label="仓库">
            <Select
              showSearch
              allowClear
              placeholder="请选择仓库"
              filterOption={false}
              onChange={(val: any) => {
                setwarehouseId(val);
              }}
              style={{ width: '180px' }}
            >
              {hourseData.length > 0
                ? hourseData.map((item: any) => (
                    <Option value={item.value} key={item.value}>
                      {item.label}
                    </Option>
                  ))
                : null}
            </Select>
            ,
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={() => {
                dispatch({
                  type: 'instock/reFresh',
                  payload: true,
                });
              }}
              style={{ marginRight: '14px' }}
            >
              查询
            </Button>
            <Button type="primary" onClick={handleDown}>
              导出
            </Button>
          </Form.Item>
        </Form>
      </div>

      <div style={{ background: '#fff' }}>
        <Table
          bordered
          columns={columns}
          dataSource={datasource}
          loading={isRefresh}
          size="middle"
          pagination={{
            pageSizeOptions: ['10', '20', '30', '40'],
            showSizeChanger: true,
            total: total,
            pageSize: size,
            current: currentPage,
            onChange: (page: any, pageSize: any) => {
              setcurrentPage(page);
            },
            onShowSizeChange: (current: any, size: any) => {
              setSize(size);
            },
          }}
        />
      </div>
    </PageHeaderWrapper>
  );
};

export default connect(({ instock, order }: any) => ({
  datasource: instock.list,
  total: instock.total,
  isRefresh: instock.isRefresh,
  commodityData: order.commodityData,
  hourseData: order.hourseData,
}))(Index);
